<template>
  <div>
    <el-row :gutter="15">
      <div class="top-subtab">
        <div v-for="(v,i) in subTabs" :key="i" :class="{active:activeIndex == v.value}" @click="changeTab(v)">{{v.label}}</div>
      </div>
      <el-form
        ref="elForm"
        :model="info"
        size="medium"
        label-width="135px"
        style="max-width: 1200px"
        v-if="activeIndex == 'LAN'"
      >
        <el-col :span="13" v-if="false">
          <el-form-item label="网卡类型" prop="sNicSpeed">
            <el-select
              v-model="info.link.sNicSpeed"
            >
              <el-option v-for="(v,i) in cardType" :key="i" :label="v.label" :value="v.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="" style="margin-left:-90px;">
            <el-checkbox v-model="info.ipv4.sV4Method" :true-label="'dhcp'" :false-label="'manual'">自动获取</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备IPv4地址" prop="sV4Address">
            <el-input
              v-model="info.ipv4.sV4Address"
              placeholder="请输入设备IPv4地址"
              :style="{ width: '100%' }"
              :disabled="info.ipv4.sV4Method == 'dhcp'"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物理地址" prop="sAddress">
            <el-input
              v-model="info.link.sAddress"
              placeholder="请输入物理地址"
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IPv4子网掩码" prop="sV4Netmask">
            <el-input
              v-model="info.ipv4.sV4Netmask"
              placeholder="请输入IPv4子网掩码"
              :disabled="info.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首选DNS服务器" prop="sDNS1">
            <el-input
              v-model="info.link.sDNS1"
              placeholder="请输入首选DNS服务器"
              :disabled="info.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IPv4默认网关" prop="sV4Gateway">
            <el-input
              v-model="info.ipv4.sV4Gateway"
              placeholder="请输入IPv4默认网关"
              :disabled="info.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备用DNS服务器" prop="sDNS2">
            <el-input
              v-model="info.link.sDNS2"
              placeholder="请输入备用DNS服务器"
              :disabled="info.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button
              :disabled="info.ipv4.sV4Method == 'manual'"
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
      <!-- WLAN form -->
      <el-form
        ref="elForm2"
        :model="info2"
        size="medium"
        label-width="135px"
        style="max-width: 1200px"
        v-else
      >
        <el-col :span="13">
          <el-form-item label="" style="margin-left:-90px;">
            <el-checkbox v-model="info2.ipv4.sV4Method" :true-label="'dhcp'" :false-label="'manual'">自动获取</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备IPv4地址" prop="ipv4.sV4Address">
            <el-input
              v-model="info2.ipv4.sV4Address"
              placeholder="请输入设备IPv4地址"
              :style="{ width: '100%' }"
              :disabled="info2.ipv4.sV4Method == 'dhcp'"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物理地址" prop="sAddress">
            <el-input
              v-model="info2.link.sAddress"
              placeholder="请输入物理地址"
              :style="{ width: '100%' }"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IPv4子网掩码" prop="sV4Netmask">
            <el-input
              v-model="info2.ipv4.sV4Netmask"
              placeholder="请输入IPv4子网掩码"
              :disabled="info2.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首选DNS服务器" prop="sDNS1">
            <el-input
              v-model="info2.link.sDNS1"
              placeholder="请输入首选DNS服务器"
              :disabled="info2.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IPv4默认网关" prop="sV4Gateway">
            <el-input
              v-model="info2.ipv4.sV4Gateway"
              placeholder="请输入IPv4默认网关"
              :disabled="info2.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备用DNS服务器" prop="sDNS2">
            <el-input
              v-model="info2.link.sDNS2"
              placeholder="请输入备用DNS服务器"
              :disabled="info2.ipv4.sV4Method == 'dhcp'"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button
              :disabled="info2.ipv4.sV4Method == 'manual'"
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm2"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {getNetworLanApi,getNetworkWlanApi } from "@/api/network";
export default {
  props: {
  },
  data() {
    return {
      info: {
        link:{},
        ipv4:{}
      },
      info2: {
        link:{},
        ipv4:{}
      },
      data:[],
      subTabs:[
        {label:'LAN',value:'LAN'},
        {label:'WLAN',value:'WLAN'},
      ],
      activeIndex:'LAN',
      cardType:[
        {label:'自动',value:'Auto'},
        {label:'10M 半双工',value:'10baseT/Half'},
        {label:'10M 双工',value:'10baseT/Full'},
        {label:'100M 半双工',value:'100baseT/Half'},
        {label:'100M 双工',value:'100baseT/Full'},
        {label:'1000M 双工',value:'1000baseT/Full'},
      ]
    };
  },
  created() {},
  mounted () {
    this.getBaseInfo();
    this.getBaseInfoWlan();
  },
  methods: {
    changeTab (v) {
      this.activeIndex = v.value;
    },
    submitForm () {
      console.log(this.info);
      this.$message.success('保存成功');
    },
    submitForm2 () {
      this.$refs.elForm2.validate((vadite) => {
        if (vadite) {
          console.log(this.info2);
        }
      })
    },
    getBaseInfo () {
      getNetworLanApi().then((res) => {
        this.info = res;
      });
    },
    getBaseInfoWlan () {
      getNetworkWlanApi().then((res) => {
        this.info2 = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-subtab {
  display: flex;
  padding: 0 50px;
  height: 40px;
  margin-bottom: 10px;
  >div {
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    width: 70px;
    color: #006EFF;
    cursor: pointer;
  }
  .active {
    background-color: #006EFF;
    color: #fff;
  }
}
</style>